<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <h1>iTravel智慧旅游服务平台</h1>
      <div class="box">
        <div class="login-box" v-show="loginShow">
          <el-form ref="loginForm" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="用户名称：" class="item" prop="name">
              <el-input v-model="form.name" placeholder="请输入用户名" size="small" width="200px">
              </el-input>
            </el-form-item>
            <el-form-item label="用户密码：" class="item" prop="pwd">
              <el-input v-model="form.pwd" placeholder="请输入密码" show-password size="small" width="200px">
              </el-input>
            </el-form-item>
            <el-button size="mini" type="primary" @click="loginMethod" plain>登录</el-button>
            <el-link class="rlink" size="mini" type="primary" @click="changeBox">没有账号？立即注册</el-link>
          </el-form>
        </div>
        <div class="register-box" v-show="registerShow">
          <el-form ref="registerForm" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="用户名称：" class="item" prop="name">
              <el-input v-model="form.name" placeholder="请输入用户名" size="small" width="200px">
              </el-input>
            </el-form-item>
            <el-form-item label="用户密码：" class="item" prop="pwd">
              <el-input v-model="form.pwd" placeholder="请输入密码" show-password size="small" width="200px">
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码：" class="item" prop="pwdSure">
              <el-input v-model="form.pwdSure" placeholder="请再次输入密码" show-password size="small" width="200px">
              </el-input>
            </el-form-item>
            <el-button size="mini" type="primary" @click="registerMethod" plain>注册</el-button>
            <el-link class="rlink2" size="mini" type="primary" @click="changeBox">返回登录界面</el-link>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/common/mixins/draw-mixin.js";
import loginApi from "@/api/login.js"; // 引入请求方法
import { addAdminRoutes } from "@/router/index.js";

export default {
  mixins: [drawMixin],
  data() {
    var validateName=(rule,value,callback) => {
      if(value==="") {
        callback(new Error("请输入用户名"));
      } else {
        // 发请求，判断用户名是否存在
        loginApi.nameExist(this.form.name).then((res) => {
          let sign=res.data.sign; // 返回false, 表示用户名已存在; 返回true, 表示用户名不存在
          if(this.loginShow) {
            if(sign) callback(new Error("用户名不存在"));
            callback();
          } else {
            if(!sign) callback(new Error("用户名已被注册"));
            callback();
          }
        });
      }
    };
    var validatePwdSure=(rule,value,callback) => {
      if(value==="") {
        callback(new Error("请再次输入密码"));
      } else {
        if(this.form.pwd!==this.form.pwdSure) {
          callback(new Error("两次输入的密码不一致"));
        }
        callback();
      }
    };
    return {
      loginShow: true,
      registerShow: false,
      form: {
        name: "",
        pwd: "",
        pwdSure: "",
      },
      rules: {
        name: [
          {
            validator: validateName,
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        pwdSure: [{ validator: validatePwdSure,trigger: "blur" }],
      },
    };
  },
  methods: {
    // 切换登录、注册
    changeBox() {
      this.$refs.loginForm.resetFields();
      this.$refs.registerForm.resetFields();
      this.loginShow=!this.loginShow;
      this.registerShow=!this.registerShow;
    },
    // 点击登录
    loginMethod() {
      this.$refs.loginForm.validate((valid) => {
        if(valid) {
          // 登录请求
          loginApi.login(this.form.name,this.form.pwd).then((res) => {
            if(!res.data.sign) this.$message.error(res.data.message);
            else {
              // 登录成功
              window.localStorage.clear();
              window.localStorage.setItem("token",res.data.token);
              if(res.data.role) addAdminRoutes();
              this.$router.push("/home");
            }
          });
        }
      });
    },
    // 点击注册
    registerMethod() {
      this.$refs.loginForm.validate((valid) => {
        if(valid) {
          // 注册请求
          loginApi.register(this.form.name,this.form.pwd).then((res) => {
            if(res.data.sign) {
              // 注册成功
              this.$message.success(res.data.message);
              this.loginShow=!this.loginShow;
              this.registerShow=!this.registerShow;
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}
.bg {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px 16px 0 16px;
  background-image: url("../../assets/login-bg.png");
  background-size: cover;
  background-position: center center;
}
h1 {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
}
.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(44, 44, 71, 0.3);
  border-radius: 8px;
}

.register-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 340px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(44, 44, 71, 0.3);
  border-radius: 8px;
}
.rlink {
  //color: #2390ff !important;
  margin-left: 200px;
}
.rlink2 {
  //clear: #2390ff !important;
  margin-left: 238px;
}
::v-deep
  .el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  content: " ";
  width: 0px;
  margin-right: 0px;
}
::v-deep .item .el-input {
  font-size: 16px;
}
::v-deep .item .el-form-item__label {
  font-size: 16px;
  color: white;
}
</style>
